<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<style>
    .scroll table {
        width: 100%;
    }

    .scroll thead, .scroll tbody, .scroll tr, .scroll td, .scroll th { display: block; }

    .scroll tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    .scroll thead th {
        height: 20px;

        /*text-align: left;*/
    }

    .scroll tbody {
        height: 500px;
        overflow-y: auto;
    }

    .scroll thead {
        /* fallback */
    }

    .scroll thead th {
        width: 19%;
        float: left;
    }

    .scroll tbody td {
        width: 18%;
        float: left;
    }

    .horizontalFilters {
        float: left;
        margin-left: 35px;
    }
    .input-large {
        width: 210px;
        margin-right: 100px;
    }
</style>
    <div class="row-fluid sortable ui-sortable">
       <div class="box span12">
                <div class="box-header">
                    <h2 openlmis-message="report.title.mnch.status"></h2>
                </div>

             <div class="clearfix"><br /></div>

                <div filter-container class="clearfix">
                    <rmnch-product-period-filter class="form-cell horizontalFilters"></rmnch-product-period-filter>
                </div>
   </div>
    <div class="clear-both"></div>

    <div class="clear-both"></div>
    &nbsp;
    <div class="row">
        <div class="span6">
            <div style="padding-left: 30px;">
                <leaflet  width="100%" height="600px" legend="legend" geojson="geojson" layers="layers"></leaflet>
            </div>
        </div>

        <div class="span6" style="border: 1px;">
          <div style="" ng-show="features && (features | filter:expectedFilter).length > 0">
              <p class="grey pull-left">
              You can click on the chart to see list of facilities
              </p><br/>
            <table class="pull-left table table-bordered"><tr><td bgcolor="#dd514c">Stocked Out</td><td bgcolor="#faa732">Under Stocked</td><td bgcolor="#4bb1cf">Over Stocked</td><td bgcolor="#5eb95e">Adequately Stocked</td></tr></table>
            <table class="table table-striped table-scrollable scroll" >
                <thead>
                <tr>
                    <th openlmis-message="label.district"></th>
                    <th style="width:70px !important;" openlmis-message="label.expected"></th>
                    <th style="width:70px !important;" openlmis-message="label.reported"></th>
                     <th style="width: 90px;" openlmis-message="label.status"></th>
                    <th openlmis-message="label.percent.stocked.out"></th>
                </tr>
                </thead>
              <tbody>
                <tr ng-repeat="feature in features | filter:expectedFilter">
                    <td style="width:120px !important;" >{{feature.name}}</td>
                    <td style="width:60px !important;" class="number">{{feature.expected}}</td>
                    <td style="width:60px !important;" class="number">{{feature.period}}</td>

                    <td style="width:180px !important;" class="number">
                         <div class="progress" style="margin-bottom:0px;width:90%">
                            <div class="bar bar-danger leaflet-clickable" ng-click="StockedOutFacilities(feature, this)" style="width: {{((feature.stockedout / feature.period) * 100).toFixed(2)}}%">{{feature.stockedout}}</div>
                            <div class="bar bar-warning leaflet-clickable" ng-click="UnderStockedFacilities(feature, this)" style="width: {{((feature.understocked / feature.period) * 100).toFixed(2)}}%">{{feature.understocked}}</div>
                            <div class="bar bar-info leaflet-clickable" ng-click="OverStockedFacilities(feature, this)" style="width: {{((feature.overstocked / feature.period) * 100).toFixed(2)}}%">{{feature.overstocked}}</div>
                            <div class="bar bar-success leaflet-clickable" ng-click="AdequatelyStockedFacilities(feature, this)" style="width: {{(100 - (((feature.stockedout + feature.understocked + feature.overstocked)/ feature.period) * 100).toFixed(2))}}%">{{ (feature.period - (feature.stockedout + feature.understocked + feature.overstocked)) }}</div>
                        </div>
                    </td>
                    <td style="width:70px !important;" class="number">{{((feature.stockedout / feature.period) * 100).toFixed(0)}} %</td>
                </tr>
              </tbody>
            </table>
            </div>



        </div>


    </div>

  </div>
<div class="row-fluid">


    <div class="span6" >


        <div style="" ng-show="products && (products).length > 0">

            <b>You are viewing data for: {{ district_title }}</b>
            <div class="clearfix"><br /></div>

            <table class="pull-left table table-bordered"><tr><td bgcolor="#dd514c">Stocked Out</td><td bgcolor="#faa732">Under Stocked</td><td bgcolor="#4bb1cf">Over Stocked</td><td bgcolor="#5eb95e">Adequately Stocked</td></tr></table>
            <p class="grey pull-left">
                You can click on the chart to see list of facilities
            </p><br/>

            <table class="table table-striped table-scrollable scroll" >
                <thead>
                <tr>
                    <th style="width:170px !important;">Product</th>
                    <th style="width:70px !important;">Reported</th>
                    <th style="width: 180px;">Status</th>
                    <th style="width: 100px;">% StockedOut</th>
                    <th style="width: 100px;">Check</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="product in products | filter:expectedProductFilter">
                    <td style="width:170px !important;" >{{product.primaryname}}</td>
                    <td style="width:70px !important;" class="number">{{product.reported}}</td>
                    <td style="width:180px !important;" class="number">
                        <div class="progress" style="margin-bottom:0px;width:180px;">
                            <div class="bar bar-danger leaflet-clickable" ng-click="StockedOutProducts(product,this);" style="width: {{((product.stockedout / product.reported) * 100).toFixed(2)}}%">{{product.stockedout}}</div>
                            <div class="bar bar-warning leaflet-clickable" ng-click="UnderStockedProducts(product, this)" style="width: {{((product.understocked / product.reported) * 100).toFixed(2)}}%">{{product.understocked}}</div>
                            <div class="bar bar-info leaflet-clickable" ng-click="OverStockedProducts(product, this)" style="width: {{((product.overstocked / product.reported) * 100).toFixed(2)}}%">{{product.overstocked}}</div>
                            <div class="bar bar-success leaflet-clickable" ng-click="AdequatelyStockedProducts(product, this)" style="width: {{(100 - (((product.stockedout + product.understocked + product.overstocked)/ product.reported) * 100).toFixed(2))}}%">{{ (product.reported - (product.stockedout + product.understocked + product.overstocked)) }}</div>
                       </div>
                    </td>
                    <td style="width:100px !important;" class="number">{{((product.stockedout / product.reported) * 100).toFixed(0)}} %</td>
                    <td style="width:30px"><input type="checkbox" ng-model="product.selected" ng-change="productSelectChange(product.selected, product)" ></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <br><br>
    <div class="span5">
        <p style="font-weight: bold">Note: The graph will show zero values when no report was found for a period</p>
        <p style="font-weight: bold; text-align: center">Aggregated Data for {{ district_title }}</p>
        <br>
        <div ng-repeat="productStock in productstocks">
            <a-float  af-option="productStock.options" af-data="productStock.dataSeries" class="chart"> </a-float>
        </div>
    </div>
</div>

  <div id="popup-box" modal="successModal" style="width: 850px;">

    <div class="modal-header">
       <h3>{{ title }}</h3>
    </div>
    <div class="modal-body">
        <div ng-show="show_sms">
             <div>
                 <p>
                     Please use the form below to customize and send sms notifications for <b>{{selected_facility.name}}</b>
                 </p>
                 <div style="padding: 10px;">
                    <div >
                      <textarea rows="4" style="width: 350px;" ng-model="sms_template"></textarea>
                    </div>
                     <div >
                         Who receives this notification?
                         <div>
                             <table class="table table-bordered">
                                 <tr ng-repeat="contact in contacts">
                                     <td>{{contact.name}}</td>
                                     <td>{{contact.contact}}</td>
                                 </tr>
                             </table>
                         </div>
                     </div>


                 </div>

             </div>
        </div>
        <div ng-show="show_email">
            <div>
                <p>
                    Use this form to customize and send email notifications for <b>{{selected_facility.name}}</b>
                </p>
                <div style="padding: 10px;">
                    <div>
                      <textarea rows="4" style="width: 350px;" ng-model="email_template"></textarea>
                    </div>
                    <div >
                        Who receives this notification?
                        <div>
                            <table class="table table-bordered">
                                <tr ng-repeat="contact in contacts">
                                    <td><b>{{contact.name}}</b></td>
                                    <td>{{contact.contact}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
      <table ng-show="!show_sms && !show_email" class="table table-bordered" >
        <thead>
        <tr>
          <th>Facility Name</th>
          <th>Phone</th>
          <th>Action</th>
          <th>Product</th>
          <th>AMC</th>
          <th>SOH</th>
          <th>MOS</th>
          <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in facilities">
          <td>
              <span   data-toggle="tooltip" title="This facility did not report for period" class="icon-warning-sign" style="color: red;" ng-show="row.stockedout"></span>
              <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-warning-sign" style="color: orange;" ng-show="row.understocked"></span>
             <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-warning-sign" style="color: blue;" ng-show="row.overstocked"></span>
              <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-check green" ng-show="row.adequatelystocked"></span>

              {{ row.name }}
          </td>
          <td>{{ row.mainPhone }}</td>
          <td>
              <div ng-show="row.hasContacts && !row.sent">
                  <a class="btn btn-mini" ng-click="showSendEmail(row)">Email</a>
                  <a class="btn btn-mini" ng-click="showSendSms(row)" ng-show="sms_enabled">SMS</a>
              </div>
              <div ng-show="!row.hasContacts">
                   No Contacts
              </div>
              <div class="green" ng-show="row.hasContacts && row.sent">
                  Sent
              </div>
          </td>
            <td>{{ row.product }}</td>
            <td>{{ row.amc }}</td>
            <td>{{ row.stockinhand }}</td>
            <td>{{ row.mos }}</td>
            <td><a ng-href="/public/pages/logistics/rnr/indexpop.html#/requisition/{{ row.rnrid }}/1?page=1&supplyType=fullSupply" onclick="popUp(this.href); return false;" target="newWin" openlmis-message="button.view.rnr"></a></td>
            <td><a ng-href="/public/pages/reports/stock-imbalance/index.html#/list?max=10000&page=1&schedule=2&zone={{ filter.zone }}&facilityType=0&facility=0&productCategory=0&product={{ filter.product }}&year={{ filter.year }}&period={{ filter.period }}&program={{ filter.program }}" onclick="popUp(this.href); return false;" target="newWin" openlmis-message="button.view.stock.imbalance.report"></a></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="modal-footer">
      <a class="btn btn-primary pull-right" ng-click="successModal=false;">Close</a>
      <a class="btn btn-primary pull-right" ng-show="show_sms || show_email" ng-click="doSend();">Send</a>
    </div>
  </div>

<!--------------------------------------------------------------------------------------------------------------------->

<div id="popup-box" modal="successModal2" style="width: 850px;">

    <div class="modal-header">
        <h3>{{ title }}</h3>
    </div>
    <div class="modal-body">
        <div ng-show="show_sms">
            <div>
                <p>
                    Please use the form below to customize and send sms notifications for <b>{{selected_facility.name}}</b>
                </p>
                <div style="padding: 10px;">
                    <div >
                        <textarea rows="4" style="width: 350px;" ng-model="sms_template"></textarea>
                    </div>
                    <div >
                        Who receives this notification?
                        <div>
                            <table class="table table-bordered">
                                <tr ng-repeat="contact in contacts">
                                    <td>{{contact.name}}</td>
                                    <td>{{contact.contact}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>


                </div>

            </div>
        </div>
        <div ng-show="show_email">
            <div>
                <p>
                    Use this form to customize and send email notifications for <b>{{selected_facility.name}}</b>
                </p>
                <div style="padding: 10px;">
                    <div>
                        <textarea rows="4" style="width: 350px;" ng-model="email_template"></textarea>
                    </div>
                    <div >
                        Who receives this notification?
                        <div>
                            <table class="table table-bordered">
                                <tr ng-repeat="contact in contacts">
                                    <td><b>{{contact.name}}</b></td>
                                    <td>{{contact.contact}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <table ng-show="!show_sms && !show_email" class="table table-bordered" style="width: 100%" >
            <thead>
            <tr>
                <th>District</th>
                <th>Facility Name</th>
                <th>Phone</th>
                <th>Action</th>
                <th>Product</th>
                <th>AMC</th>
                <th>SOH</th>
                <th>MOS</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in productPopup">
                <td>{{ row.geographiczonename }}</td>
                <td>
                    <span   data-toggle="tooltip" title="This facility did not report for period" class="icon-warning-sign" style="color: red;" ng-show="row.stockedout"></span>
                    <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-warning-sign" style="color: orange;" ng-show="row.understocked"></span>
                    <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-warning-sign" style="color: blue;" ng-show="row.overstocked"></span>
                    <span  data-toggle="tooltip" title="This facility has reported properly" class="icon-check green" ng-show="row.adequatelystocked"></span>

                    {{ row.name }}
                </td>
                <td>{{ row.mainPhone }}</td>
                <td>
                    <div ng-show="row.hasContacts && !row.sent">
                        <a class="btn btn-mini" ng-click="showSendEmail(row)">Email</a>
                        <a class="btn btn-mini" ng-click="showSendSms(row)" ng-show="sms_enabled">SMS</a>
                    </div>
                    <div ng-show="!row.hasContacts">
                        No Contacts
                    </div>
                    <div class="green" ng-show="row.hasContacts && row.sent">
                        Sent
                    </div>
                </td>
                <td>{{ row.product }}</td>
                <td>{{ row.amc }}</td>
                <td>{{ row.stockinhand }}</td>
                <td>{{ row.mos }}</td>
                <td><a ng-href="/public/pages/logistics/rnr/indexpop.html#/requisition/{{ row.rnrid }}/1?page=1&supplyType=fullSupply" onclick="popUp(this.href); return false;" target="newWin" openlmis-message="button.view.rnr"></a></td>
                <td><a ng-href="/public/pages/reports/stock-imbalance/index.html#/list?max=10000&page=1&schedule=2&zone={{ filter.zone }}&facilityType=0&facility=0&productCategory=0&product={{ filter.product }}&year={{ filter.year }}&period={{ filter.period }}&program={{ filter.program }}" onclick="popUp(this.href); return false;" target="newWin" openlmis-message="button.view.stock.imbalance.report"></a></td>

            </tr>
            </tbody>
        </table>
    </div>

    <div class="modal-footer">
        <a class="btn btn-primary pull-right" ng-click="successModal2=false;">Close</a>
        <a class="btn btn-primary pull-right" ng-show="show_sms || show_email" ng-click="doSend();">Send</a>
    </div>
</div>
</div>
